<template>
  <div class>
    <el-dialog width="80%" title="添加用户" :visible.sync="dialogFormVisible">
      <el-form size="small" inline :model="addForm" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="真实姓名">
          <el-input v-model="addForm.realName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门名称" prop="organId">
          <el-cascader
            change-on-select
            :options="options"
            :props="cascaderProps"
            v-model="addForm.organId"
            style="width: 200px;"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="职员编码">
          <el-input v-model="addForm.userCode" disabled autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="addForm.sex" autocomplete="off" style="width: 200px;">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="证件类型">
          <el-input v-model="addForm.identificationType" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="证件号码">
          <el-input v-model="addForm.identificationNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="出生日期">
          <el-date-picker
            style="width: 200px;"
            v-model="addForm.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="家庭住址">
          <el-input v-model="addForm.adress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮政编码">
          <el-input v-model="addForm.postcode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="职务">
          <el-input v-model="addForm.userPost" autocomplete="off" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="职称">
          <el-input v-model="addForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="职员类别">
          <el-input v-model="addForm.categoryStaff" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="学校">
          <el-input v-model="addForm.school" autocomplete="off" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="最高学历">
          <el-input v-model="addForm.highEducation" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="职员属性">
          <el-input v-model="addForm.staffAttribute" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="固定电话">
          <el-input v-model="addForm.telephone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="移动电话">
          <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电子邮箱">
          <el-input v-model="addForm.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="QQ号码">
          <el-input v-model="addForm.qqNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="微信号">
          <el-input v-model="addForm.wechatNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="建档人:">
          <el-input v-model="addForm.createUserName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="addForm.remark"
            type="textarea"
            autocomplete="off"
            style="width:200px;"
          ></el-input>
        </el-form-item>

        <el-form-item label="启用状态">
          <el-select v-model="addForm.userStatus" style="width: 200px;">
            <el-option label="启用" value="1"></el-option>
            <el-option label="不启用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="同时登录 ">
          <el-select v-model="addForm.enableParallelLogin" style="width: 200px;">
            <el-option label="允许" value="1"></el-option>
            <el-option label="不允许" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="登陆账号" prop="username" v-if="addForm.userStatus==1">
          <el-input v-model="addForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登陆密码" prop="password" v-if="addForm.userStatus==1">
          <el-input v-model="addForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword" v-if="addForm.userStatus==1">
          <el-input v-model="addForm.confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList as glbOptions } from "../../jggl/organ";
import { addItem } from "../function";
export default {
  name: "addForm",
  data() {
    let that = this;
    let validatePass2 = (rule, value, callback) => {
      if (that.addForm.password && value === "") {
         callback(new Error("请再次输入密码"));
      } else if (that.addForm.password && value !== that.addForm.password) {
         callback(new Error("两次输入密码不一致!"));
      } else {
         callback();
      }
    };
    return {
      dialogFormVisible: false,
      addForm: {
        username: "",
        enableParallelLogin: "1",
        password: "",
        realName: "",
        mobile: "",
        telephone: "",
        email: "",
        userStatus: "1",
        createTime: new Date(),
        tokenCreateTime: "",
        token: "",
        userType: "",
        organCode: "",
        organName: "",
        deptName: "",
        organId: "",
        enabledState: "",
        userCode: "",
        simpleName: "",
        sex: "",
        identificationType: "",
        identificationNumber: "",
        birthday: "",
        adress: "",
        postcode: "",
        userPost: "",
        title: "",
        categoryStaff: "",
        school: "",
        highEducation: "",
        staffAttribute: "",
        qqNumber: "",
        remark: "",
        loginAccount: "",
        confirmPassword: "",
        outageDate: "",
        roleAttribute: "",
        wechatNumber: "",
        createUserName: ""
      },
       defaultForm: {
        enableParallelLogin: "1",
        userStatus: "1"
      },
         options: [],
      cascaderProps: {
        value: "id",
        label: "organName",
        children: "children"
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" }
        ],
        confirmPassword: [
          { required: false, validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  mounted () {
    this.getGlbOptions()
  },
  methods: {
     getGlbOptions() {
      glbOptions().then(res => {
        console.log("ok");
        console.log(res.retBody);
        if (res.retHead.code == "0000000") {
          this.options = res.retBody;
        }
      });
    },
 
    cancle() {
      this.dialogFormVisible = false;
      this.addForm = {};
      this.addForm = this.defaultForm;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAdd() {
      if (this.addForm.organId && this.addForm.organId.length > 0) {
        this.addForm.organId = this.addForm.organId[
          this.addForm.organId.length - 1
        ];
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          // console.log("通过");
          let params = {};
          for (let key in this.addForm) {
            if (this.addForm[key]) {
              params[key] = this.addForm[key];
            }
          }
          addItem(params).then(res => {
            this.dialogFormVisible = false;
            if (res.retHead.code == "0000000") {
              this.$message({
                message: "添加成功！",
                type: "success"
              });
                this.$emit("addOver")
              this.resetForm("form");
            } else {
              this.$message({
                message: "添加失败：" + res.retHead.message,
                type: "error"
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style>
</style>